<template>
   <el-row class="tac">
      <el-col :span="12">
         <el-menu
             active-text-color="#ffd04b"
             background-color="#545c64"
             class="el-menu-vertical-demo"
             :collapse="isCollapse"
             default-active="2"
             text-color="#fff"
         >
            <el-menu-item index="0-0">
               <el-icon>
                  <HomeFilled/>
               </el-icon>
               <span>主页</span>
            </el-menu-item>
            <el-sub-menu v-for="(item, index) in pathArrZ" :key="index" class="m_sub" :index="(index + 1).toString()">
               <template #title>
                  <el-icon>
                     <component :is="item.icon"/>
                  </el-icon>
                  <span>{{ item.title }}</span>
               </template>
               <el-menu-item v-for="(subItem,subIndex) in item.subtitle" :key="0" :index="(index + 1).toString()+'-'+subIndex.toString()"
                             @click="enter_left(index , subIndex)">
                  {{ subItem }}
               </el-menu-item>
            </el-sub-menu>
         </el-menu>
      </el-col>
   </el-row>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, computed} from "vue";
import {useStore} from "vuex";

const store = useStore()
let router = useRouter()
//用于页面跳转
//subtitle子菜单内容对应的路径
let pathArr = [['PrivateMessage'],["Course",'CourseReview','CourseQuestion'],["articles",'PsychologicalKnowledge','fm','PublicWelfareCenter','PrivateMessage']]
//用于菜单显示,icon表头图片,title下拉头标题,subtitle子菜单内容
let pathArrZ = [
 {
    icon: MilkTea,
    title: "我的心理答疑",
    subtitle: ["私信管理"]
  },{
    icon: MilkTea,
    title: "我的课程管理",
    subtitle: ["课程管理", "课程评价管理","课程问题"]
  },{
    icon: MilkTea,
    title: "内容管理",
    subtitle: ["文章管理",  "心理知识管理","FM管理","公益中心管理"]
  }
  // ,{
  //   icon: MilkTea,
  //   title: "我的心理答疑",
  //   subtitle: []
  // }
]
import {
   Document,
   Menu as IconMenu,
   Setting,
   HomeFilled,
   MilkTea
} from '@element-plus/icons-vue'

const isCollapse = computed(() => {
   return store.state.isCollapse
})

//pre分组下标 next子菜单下标
function enter_left(group, index) {
   //匹配下标
   console.log(group, index)
   console.log(`/home/` + pathArr[group][index])
   //根据下标跳转
   router.push({path: `/home/` + pathArr[group][index], query: {pre: group, next: index}})
}

</script>
<style scoped>
.el-menu-vertical-demo {
   user-select: none;
   width: 70px;
   height: 100vh;
}

.m_sub {

}

.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 250px;

   height: 100vh;
}
</style>
